:root{
    --size:calc(100vw/(var(--sacle)));
}

* {
    user-select: none;
}

body,
html {
    background-color: #fff;
}

.block {
    border-radius: calc(var(--size)*6/100);
    float: left;
    /* display: inline-block; */
    background: #ffdbdb;
    box-shadow: 9px 9px 11px #d9baba;
    font-size: calc(var(--size)*2/100);
    width: calc(88%/(var(--sacle)));
    margin: calc(2%/(var(--sacle)));
    padding: calc(3%/(var(--sacle))) calc(4%/(var(--sacle)));
}

.title,
.input-box,
.extend {
    width: 100%;
    clear: both;
    font-size: 200%;
}

.title {
    font-size: 300%;
    font-weight: bolder;
}

.content-box,
.radios-box {
    width: 100%;
}

.content-box {
    border-radius: calc(var(--size)*2/100);
    background: #ffd6d6;
    box-shadow: inset 19px 19px 37px #d9b6b6,
        inset -19px -19px 37px #fff6f6;
    margin: 2% 0;
    height: calc(var(--size)*8/100);
}

.content-box .logo,
.content-box .content,
.content-box .button {
    float: left;
}

.content-box .logo {
    height: calc(var(--size)*8/100);
    width: calc(var(--size)*8/100);
}

.content-box .logo img {
    width: 100%;
    border-radius: calc(var(--size)*2/100);
    pointer-events: none;
}

.content-box .content {
    width: calc(99.7% - calc(var(--size)*20/100));
    height: 100%;
}

.content>input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 150%;
}

.button {
    height: 100%;
    width: auto;
    text-align: center;
    padding: 0 calc(var(--size)*2/100);
    line-height: calc(var(--size)*8/100);
    border-radius: calc(var(--size)*2/100);
    background: #77c4ff;
}

.radios-box .radios {
    display: inline-block;
}

input[type="radio"] {
    display: none;
}

input[type="radio"]+span::before {
    content: "";
    display: inline-block;
    width: calc(var(--size)*2/100);
    height: calc(var(--size)*2/100);
    margin: 0 -3px 0 3px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid #ed8787;
    line-height: .65;
    padding: 2px;
    vertical-align: -3px;
}

input[type="radio"]:checked+span::before {
    background-color: #ed8787;
    background-clip: content-box;
}


@media only screen and (max-width: 600px) {
    :root {
        --sacle: 1
    }
}

@media only screen and (min-width: 600px) and (max-width: 1200px) {
    :root {
        --sacle: 2
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1800px) {
    :root {
        --sacle: 3
    }
}

@media only screen and (min-width: 1800px) and (max-width: 2400px) {
    :root {
        --sacle: 4
    }
}

@media only screen and (min-width: 2400px) {
    :root {
        --sacle: 5
    }
}